<!DOCType html>
<html>

<head>
  <meta charset="utf-8">
  <title>css 画一条 0.5px 的线</title>
  <meta name="viewport" content="width=device-width">
  <style>
    .hr {
      width: 300px;
      background-color: #000;
    }

    .hr.half-px {
      height: 0.5px;
    }

    .hr.one-px {
      height: 1px;
    }

    .hr.scale-half {
      height: 1px;
      transform: scaleY(0.5);
      transform-origin: 50% 100%;
    }

    .hr.gradient {
      height: 1px;
      background: linear-gradient(0deg, #ccc, #000);
    }

    .hr.boxshadow {
      height: 1px;
      border-radius: 50px;
      background: none;
      box-shadow: 0 0.5px 0 #000;
    }

    .hr.svg {
      background: none;
      height: 1px;
      /*background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='red' x='0' y='0' width='1' height='0.5'/></svg>");*/
      background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='red' x='0' y='0' width='1' height='0.5'/></svg>");
      background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect x='0' y='0' width='1' height='0.5' fill='#cccccc'></rect></svg>");
      background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");
      background: url("");
    }
  </style>
</head>

<body>
  <p>svg</p>
  <div class="hr svg"></div>

  <p>box-shadow: 0 0.5px 0 #000</p>
  <div class="hr boxshadow"></div>

  <p>linear-gradient(0deg, #fff, #000)</p>
  <div class="hr gradient"></div>

  <p>1px + scaleY(0.5)</p>
  <div class="hr scale-half"></div>

  <p>0.5px</p>
  <div class="hr half-px"></div>

  <p>1px</p>
  <div class="hr one-px"></div>
</body>

</html>
